<script setup lang="ts">
const researchItems = [
  {
    icon: 'Monitor',
    title: '人工智能',
    description: '开展智能算法、机器学习、计算机视觉等前沿研究',
  },
  {
    icon: 'Cpu',
    title: '量子科技',
    description: '推进量子计算、量子通信等领域的创新发展',
  },
  {
    icon: 'Lightning',
    title: '新能源',
    description: '致力于清洁能源、储能技术等可持续发展研究',
  },
  {
    icon: 'Connection',
    title: '生物医药',
    description: '开展生物技术、药物研发等领域的突破性研究',
  },
];
</script>

<template>
  <!-- 学术研究 -->
  <div class="research-section">
    <div class="section-container">
      <h2 class="section-title">学术研究</h2>
      <div class="research-grid">
        <div
          v-for="(research, index) in researchItems"
          :key="index"
          class="research-card"
        >
          <el-icon class="card-icon">
            <component :is="research.icon" />
          </el-icon>
          <h3 class="card-title">{{ research.title }}</h3>
          <p class="card-description">{{ research.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.research-section {
  @apply bg-gray-50 py-12;
}

.section-container {
  @apply container mx-auto px-4;
}

.section-title {
  @apply mb-12 text-center text-3xl font-bold;
}

.research-grid {
  @apply grid grid-cols-4 gap-6;
}

.research-card {
  @apply rounded-lg bg-white p-6 shadow-lg transition-shadow hover:shadow-xl;
}

.card-icon {
  @apply mb-4 text-4xl text-blue-600;
}

.card-title {
  @apply mb-2 text-xl font-bold;
}

.card-description {
  @apply text-gray-600;
}
</style>
